<template>
	<view class="container">
		<view class="person_box" v-for="item in person">
			<view class="avatar" style="margin-right: 24upx;">
				<image :src="item.avatar || defaultAvatar" class="avatar"></image>
			</view>
			<view class="person_msg">
				<view class="person_position">
					<view :class="{level0:item.level == 0,
					level1:item.level == 1,
					level2:item.level == 2}" class="position_box">
						<text>{{item.position}}</text>
					</view>
					<view class="person_name">{{item.name}}</view>
				</view>
				<view class="msg_details">{{item.details}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultAvatar: '/static/image/avatar.png',
				person: [{
					avatar: '',
					position: '主席',
					level: 0,
					name: '王建军',
					details: '男，汉族，1956年7月出生，研究生学历，中共党员，中国肢协第六届常务副主席、第七届主席。中国残联扶贫办原主任。'
				}, {
					avatar: '',
					position: '副主席',
					level: 1,
					name: '孙建博',
					details: '男，汉族，1959年10月出生，研究生学历，中共党员，中国肢协副主席，山东省淄博市林业局调研员、山东省原山林场党委书记，山东省肢协主席，十三届全国人大代表。'
				}, {
					avatar: '',
					position: '委员',
					level: 2,
					name: '刘畅',
					details: '男，汉族，1956年7月出生，中共党员。'
				}, {
					avatar: '',
					position: '委员',
					level: 2,
					name: '郭峰',
					details: '男，汉族，1976年6月出生，中共党员。'
				}, {
					avatar: '',
					position: '委员',
					level: 2,
					name: '王希伟',
					details: '男，汉族，1969年2月出生。'
				}, {
					avatar: '',
					position: '委员',
					level: 2,
					name: '唐微微',
					details: '女，汉族，1978年9月出生。'
				}, ]
			}
		},
		methods: {}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		/* background-color: #FBFBFB; */
		overflow: hidden;
		padding: 32upx;
	}

	.person_box {
		display: flex;
		padding: 24upx;
		margin-bottom: 12upx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 2upx 2upx 22upx -2upx rgba(0, 0, 0, 0.2);
	}

	.avatar {
		height: 100upx;
		width: 100upx;
		border-radius: 50upx;
		background-size: contain
	}

	.person_position {
		display: flex;
		margin-bottom: 16upx;
	}

	.position_box {
		border-radius: 10px;
		padding: 0 18upx;
		text-align: center;
		line-height: 40upx;
		color: white;
		font-size: 24upx;
		margin-right: 16upx;
	}

	.level0 {
		background: #FF814A;
	}

	.level1 {
		background: #75BA9E;
	}

	.level2 {
		background: #60C1D2;
	}

	.person_name {
		font-size: 30upx;
	}

	.msg_details {
		color: #7A7A7A;
		font-size: 26upx;
	}
</style>
